<template>
  <div>
    <el-card>
      <!-- 搜索框与添加按钮 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="pageInfo.query" clearable>
            <el-button
              :loading="searchStatus"
              slot="append"
              icon="el-icon-search"
              @click="getAllUserList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-edit" @click="isAddUserInfo"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 用户信息表格 -->
      <el-row>
        <el-table
          :data="allUserInfoList.userInfoList"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="#"
            width="80px"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            min-width="200px"
          ></el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            label="电话"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="role_name"
            label="角色"
            width="200px"
          ></el-table-column>
          <el-table-column prop="mg_state" label="状态" width="80px">
            <template v-slot="scope">
              <el-switch
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeMgState(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="180px">
            <template v-slot="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="修改角色"
                placement="top"
                :enterable="false"
              >
                <el-button
                  @click="isChangeUser(scope.row.id)"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除角色"
                placement="top"
                :enterable="false"
              >
                <el-button
                  @click="delUserInfo(scope.row.id)"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="分配角色"
                placement="top"
                :enterable="false"
              >
                <el-button
                @click="changeUserRole(scope.row)"
                  type="warning"
                  icon="el-icon-setting"
                  circle
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pagenum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allUserInfoList.total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <addUserBox @addUsrInfoDrive="getAllUserList" ref="adddialog"></addUserBox>
    <change-user-box
      @changeUsrInfoDrive="getAllUserList"
      :thisUserInfoId="thisUserInfoId"
      ref="changedialog"
    ></change-user-box>
    <changeUserRole  @changeRoleInfoDrive="getAllUserList" ref="changeUserRoleBox"></changeUserRole>
  </div>
</template>

<script>
import addUserBox from '@/components/User/UsersView/addUserBox.vue'
import changeUserBox from '@/components/User/UsersView/changeUserBox.vue'
import changeUserRole from '@/components/User/UsersView/changeUserRole.vue'
import {
  getAllUserListApi,
  changeUserStateApi,
  delUserInfoByidApi
} from '@/Utils/Api/getUserInfoApi'
export default {
  name: 'UserView',
  data () {
    return {
      searchStatus: false,
      searchInfo: '',
      pageInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      allUserInfoList: {
        userInfoList: [],
        total: 0
      },
      thisUserInfoId: 0
    }
  },
  components: {
    addUserBox,
    changeUserBox,
    changeUserRole
  },
  created () {
    this.getAllUserList()
  },
  mounted () {},
  methods: {
    isAddUserInfo () {
      this.$nextTick(() => {
        this.$refs.adddialog.dialogVisible = true
      })
    },
    isChangeUser (id) {
      this.thisUserInfoId = id
      this.$nextTick(() => {
        this.$refs.changedialog.dialogVisible = true
      })
    },
    // 获得所有用户信息列表
    async getAllUserList () {
      this.searchStatus = true
      try {
        const { data } = await getAllUserListApi(this.pageInfo)
        if (data.meta.status === 200) {
          this.allUserInfoList.userInfoList = data.data.users
          this.allUserInfoList.total = data.data.total
          this.$message({
            type: 'success',
            message: '表单数据已更新'
          })
          this.searchStatus = false
        } else {
          return this.$message({
            type: 'error',
            message: '表单获取失败'
          })
        }
      } catch (error) {
        return console.log(error)
      }
    },
    // 更改用户状态
    async changeMgState (userInfo) {
      const { data } = await changeUserStateApi(userInfo)
      console.log(data)
      if (data.meta.status !== 200) {
        userInfo.mg_state = !userInfo.mg_state
        return this.$message({
          type: 'error',
          message: '表单状态更新失败'
        })
      }
      this.$message({
        type: 'success',
        message: '表单状态已更新'
      })
    },
    // 删除用户信息
    async delUserInfo (id) {
      const confirmRus = await this.$confirm('此操作将永久删除用户?', '警告!', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消删除'
      }).catch((err) => err)
      console.log(confirmRus)
      if (confirmRus !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '用户取消了删除'
        })
      }
      const { data } = await delUserInfoByidApi(id)
      console.log(data)
      if (data.meta.status !== 200) {
        return this.$message({
          type: 'error',
          message: data.meta.msg
        })
      }
      this.getAllUserList()
      this.$message({
        type: 'success',
        message: data.meta.msg
      })
    },
    // 分配用户角色
    changeUserRole (row) {
      this.$nextTick(() => {
        this.$refs.changeUserRoleBox.dialogVisible = true
        this.$refs.changeUserRoleBox.userInfo = row
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageInfo.pagesize = val
      this.getAllUserList()
    },
    handleCurrentChange (val) {
      this.pageInfo.pagenum = val
      this.getAllUserList()
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 15px;
}
</style>
